<template>
	<view>
			<view class="cu-card">
				<view class="cu-item padding bg-img shadow-blur bg-gradual-theme">
					<view class="flex text-white" style="align-items: center;">
						<view class="text-cut text-lg  text-bold"  style="width:240rpx">可添加总人数</view>
						<text class="margin-left text-xxm">{{Stock.total_num || 0}} 人</text>
					</view>
					<view class="flex margin-top text-white" style="align-items: center;">
						<view class="text-cut text-lg text-bold" style="width:240rpx">已添加人数</view>
						<text class="margin-left text-xxm">{{Stock.available_num || 0}} 人</text>
					</view>
					<view class="flex margin-top text-white" style="align-items: center;">
						<view class="text-cut text-lg  text-bold"  style="width:240rpx">剩余可添加人数</view>
						<text class="margin-left text-xxm">{{(Stock.total_num-Stock.available_num)|| 0}} 人</text>
					</view>
					<view class="flex margin-top" style="align-items: center; justify-content: flex-end;" @tap="addShop">
						<text class="cuIcon-roundaddfill text-white" style="font-size: 40rpx;"></text>
						<text class=" text-df" style="margin-left:10rpx;">新增店主</text>
					</view>
				</view>
				
			</view>
			<view class="cu-bar bg-white">
				<view class="action">
					<text class="cuIcon-titles text-theme"></text>
					<text class="text-lg text-bold">店主列表</text>
				</view>
			</view>
			<scroll-view scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub":class="active===index?'text-theme cur':''" v-for="(item,index) in menuList" :key="index"  @tap="GET_ShopList(item.type)">
						{{item.title}}
					</view>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true">
				<view v-if="!shopList.length" class="empty">
				   <view style="margin-top: 100upx;text-align: center">
					   <view class="text-cut text-lg margin-top-sm">暂无数据</view>
				   </view>
				</view>
				<view class="cu-list menu-avatar" v-else>
					<view class="cu-item" v-for="(item,index) in shopList" :key="index">
						<view class="cu-avatar round lg" :style="'background-image:url('+item.face+');'"></view>
						<view class="content">
							<view class="text-cut text-sm">
								<text>{{item.nickname || ''}}</text>
								<text class="margin-left-sm">{{item.mobile}}</text>
							</view>
							<view class="text-gray flex">
								<view class="text-cut text-sm">
									创建时间：{{unixToDate(item.create_time)}}
								</view>
							</view>
						</view>
						<view class="action" style="width: 200rpx;">
							<view class="text-grey text-sm">状态:{{checkStatus(item.statue)}}</view>
						</view>
					</view>
				</view>	
			</scroll-view>
		</view>
	</template>

<script>
	import * as Seller_API from '../../../api/member/seller.js'
	export default {
		data() {
			return {
				shopList:[],
				Stock:{},
				active:0,
				menuList:[
					{
						title : '已激活',
						type:2
					},
					{
						title : '未激活',
						type:5
					}
				],
				izApply:false
			};
		},
		
		onShow() {
			this.GET_Stock()
			this.GET_ShopList()
		},
		onPullDownRefresh() {
			setTimeout(()=> {
				uni.stopPullDownRefresh()
				this.GET_Stock()
				this.GET_ShopList()
			}, 200);
		},
		methods:{
			GET_Stock(){
				Seller_API.getmyStock().then(res =>{
					this.Stock = res
				})
			},
			GET_ShopList(type){
				let tmpType = 0
				if(type){
					this.active = type===5?1:0
					Seller_API.getOfficerList(type).then(res =>{
						this.shopList = res
					})
				}else{
					console.log('this.active')
					tmpType = this.active===1?5:2
					Seller_API.getOfficerList(tmpType).then(res =>{
						this.shopList = res
					})
				}
			},
			addShop(){
				uni.navigateTo({
					url:'./shop-application?active='+this.active
				})
			},
			checkStatus(status){
				switch(status){
					case 2:
					this.izApply = true
					return '已激活'
					case 5:
					this.izApply = false
					return '未激活'
				}
			},
			unixToDate(unix, format) {
			  let _format = format || 'yyyy-MM-dd hh:mm:ss'
			  const d = new Date(unix)
			  const o = {
			    'M+': d.getMonth() + 1,
			    'd+': d.getDate(),
			    'h+': d.getHours(),
			    'm+': d.getMinutes(),
			    's+': d.getSeconds(),
			    'q+': Math.floor((d.getMonth() + 3) / 3),
			    S: d.getMilliseconds()
			  }
			  if (/(y+)/.test(_format)) _format = _format.replace(RegExp.$1, (d.getFullYear() + '').substr(4 - RegExp.$1.length))
			  for (const k in o) if (new RegExp('(' + k + ')').test(_format)) _format = _format.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
			  return _format
			}
			
		}
	}
</script>

<style lang="scss">

</style>
